<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"></meta>
    <title>系统用户管理</title>
    <meta name="description" content="个人后台管理系统"></meta>
    <meta name="viewport" content="width=device-width, initial-scale=1"></meta>

    <link rel="stylesheet" type="text/css" href="/css/main.css"></link>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css"></link>
</head>
<body class="app sidebar-mini rtl">
<!-- Navbar-->
<div th:replace="common/html/back::header"></div>
<!-- Sidebar menu-->
<div th:replace="common/html/back::sidebar"></div>
<main class="app-content">
    <div class="app-title">
        <div>
            <h1><i class="fa fa-users"></i> 用户管理</h1>
            <p>系统用户管理相关功能</p>
        </div>
        <ul class="app-breadcrumb breadcrumb side">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item">系统管理</li>
            <li class="breadcrumb-item">用户管理</li>
        </ul>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="tile">
                <div class="tile-body">
                    <table class="table table-hover table-bordered" id="sampleTable" style="white-space:nowrap">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>用户名</th>
                            <th>邮箱</th>
                            <th>手机号</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</main>
<!-- Essential javascripts for application to work-->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.14.3/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="/js/main.js"></script>
<!-- The javascript plugin to display page loading on top-->
<!-- Data table plugin-->
<script type="text/javascript" src="https://cdn.bootcss.com/datatables/1.10.5/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="/js/plugins/dataTables.bootstrap.min.js"></script>
</body>
<script type="text/javascript" th:inline="javascript">
      /*<![CDATA[*/
        var table = $('#sampleTable').DataTable({
            sScrollx : "100%",
            bAutoWidth: false,
            searching: true,
            bServerSide : true,//开启后台分页功能
            fnServerData: retrieveData, //执行函数
            bPaginate : true,//显示分页按钮
            sAjaxSource : "/back/sysuser/getData",//请求url
            aoColumns : [{"mDataProp": "userId", "sDefaultContent": ""},
                         {"mDataProp": "userName", "sDefaultContent": ""},
                         {"mDataProp": "email", "sDefaultContent": ""},
                         {"mDataProp": "mobile", "sDefaultContent": ""}
                        ],
            "language": {
              "lengthMenu": "每页 _MENU_ 条记录",
              "zeroRecords": "没有找到记录",
              "info": " _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
              "infoEmpty": "无记录",
              "infoFiltered": "(从 _MAX_ 条记录过滤)",
              "search": "搜索",
              "oPaginate": {
                  "sFirst": "首页",
                  "sPrevious": "上页",
                  "sNext": "下页",
                  "sLast": "末页"
              },
              "oAria": {
                  "sSortAscending": ": 以升序排列此列",
                  "sSortDescending": ": 以降序排列此列"
              }
            },
        });

      function retrieveData(sSource, aoData, fnCallback) {
          console.log(JSON.stringify(aoData));
          $.ajax({
              url: sSource,
              data: {"aoData" : JSON.stringify(aoData)},
              type: "post",
              dataType: "json",
              async: false,//异步与否，待测试
              success: function(result){
                    fnCallback(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
              },
              error: function(msg){
                    alert("表格信息获取失败！！");
              }
          });
      }
      /*]]>*/
    </script>
</html>